<template>
  <div class="detail-container">
    <!-- 卡片 订单信息 -->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="6"><div class="ddbh">订单编号:&emsp;<span>{{ dataInfo?.id }}</span></div></el-col>
        <el-col :span="6"><div class="ydbh">运单编号:&emsp;<span>{{ dataInfo?.orderId }}</span></div></el-col>
        <el-col :span="6"><div class="xdsj">下单时间:&emsp;<span>{{ dataInfo.order?.createTime }}</span></div></el-col>
        <el-col :span="6">
          <div class="ddzt">订单状态:&emsp;
            <span v-if="dataInfo.order?.status===22000">已关闭</span>
            <span v-else-if="dataInfo.order?.status===23000">待取件</span>
            <span v-else-if="dataInfo.order?.status===23001">已取件</span>
            <span v-else-if="dataInfo.order?.status===23002">网点自寄</span>
            <span v-else-if="dataInfo.order?.status===23003">网点入库</span>
            <span v-else-if="dataInfo.order?.status===23004">待装车</span>
            <span v-else-if="dataInfo.order?.status===23005">运输中</span>
            <span v-else-if="dataInfo.order?.status===23006">网点出库</span>
            <span v-else-if="dataInfo.order?.status===23007">待派送</span>
            <span v-else-if="dataInfo.order?.status===23008">派送中</span>
            <span v-else-if="dataInfo.order?.status===23009">已签收</span>
            <span v-else-if="dataInfo.order?.status===23010">拒收</span>
            <span v-else-if="dataInfo.order?.status===23011">已取消</span>
            <span v-else>无</span>
          </div>
        </el-col>
        <el-col :span="6"><div class="yqddsj">预期到达时间:&emsp;<span>{{ dataInfo.order?.estimatedArrivalTime }}</span></div></el-col>
      </el-row>
    </el-card>
    <!-- 基本信息 -->
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基本信息" name="1">
        <div class="pake1">
          <img src="" alt="">
          <span>发货方</span>
        </div>
        <div class="Shipper">
          <div>
            <div class="demo-input-suffix">发货方姓名: &emsp;<span>{{ dataInfo.order?.senderName }}</span></div>
            <div class="demo-input-suffix">发货方地址: &emsp; <span>{{ dataInfo.order?.senderProvince.name+dataInfo.order?.senderCity.name+dataInfo.order?.senderCounty.name }}</span></div>
          </div>
          <div class="suffixphone">
            <div class="demo-input-suffix"> 发货方电话: &emsp;<span>{{ dataInfo.order?.senderPhone }}</span></div>
            <div class="demo-input-suffix">详细地址: &emsp; <span>{{ dataInfo.order?.senderAddress }}</span></div>
          </div>
        </div>
        <div class="pake1">
          <img class="img-info2" src="" alt="">
          <span>收货方</span>
        </div>
        <div class="Shipper">
          <div>
            <div class="demo-input-suffix">收货方姓名: <span>{{ dataInfo.order?.receiverName }}</span></div>
            <div class="demo-input-suffix">收货方地址: <span>{{ dataInfo.order?.receiverProvince.name+dataInfo.order?.receiverCity.name+dataInfo.order?.receiverCounty.name }}</span></div>
          </div>
          <div class="suffixphone">
            <div class="demo-input-suffix"> 收货方电话: <span>{{ dataInfo.order?.receiverPhone }}</span></div>
            <div class="demo-input-suffix">详细地址: <span>{{ dataInfo.order?.receiverAddress }}</span></div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- 运输信息 -->
    <el-collapse v-model="activeNames" class="transport">
      <el-collapse-item title="运输信息" name="2">
        <el-steps v-if="dataInfo.taskTransports?.length!==0" :active="3" align-center finish-status="success" space="20%">
          <el-step :title="dataInfo.taskTransports[1]?.startAgency?.name">
            <template #description style="margin-right: 10px;">
              <div class="step-row">
                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="processing_content">
                  <tr>
                    <td>运输任务: &nbsp;</td>
                    <td style="color: #419eff;">{{ dataInfo.taskTransports[1]?.id }}</td>
                  </tr>
                  <tr>
                    <td>车辆:&emsp;&emsp; &nbsp;</td>
                    <td style="color: #818693;">{{ dataInfo.taskTransports[1]?.truck.licensePlate }}</td>
                  </tr>
                  <tr>
                    <td>司机: &emsp;&emsp; &nbsp;</td>
                    <td style="color: #818693;">{{ dataInfo.taskTransports[1]?.drivers[0].name+','+dataInfo.taskTransports[1]?.drivers[1].name }}</td>
                  </tr>
                  <tr>
                    <td>到达时间: &nbsp;</td>
                    <td style="color: #818693;">{{ dataInfo.taskTransports[1]?.updated }}</td>
                  </tr>
                </table>
              </div>
            </template>
          </el-step>
          <el-step :title="dataInfo.taskTransports[1]?.endAgency?.name" description="这是一段很长很长很长的描述性文字">
            <template #description>
              <div class="step-row">
                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="processing_content">
                  <tr>
                    <td>运输任务: &nbsp;</td>
                    <td style="color: #419eff;">{{ dataInfo.taskTransports[0]?.id }}</td>
                  </tr>
                  <tr>
                    <td>车辆:&emsp;&emsp; &nbsp;</td>
                    <td style="color: #818693;">{{ dataInfo.taskTransports[0]?.truck.licensePlate }}</td>
                  </tr>
                  <tr>
                    <td>司机: &emsp;&emsp; &nbsp;</td>
                    <td style="color: #818693;">{{ dataInfo.taskTransports[0]?.drivers[0].name+','+dataInfo.taskTransports[0]?.drivers[1].name }}</td>
                  </tr>
                  <tr>
                    <td>到达时间: &nbsp;</td>
                    <td style="color: #818693;">{{ dataInfo.taskTransports[0]?.updated }}</td>
                  </tr>
                </table>
              </div>
            </template>
          </el-step>
          <el-step :title="dataInfo.taskTransports[0]?.endAgency?.name" description="" />
        </el-steps>
        <el-empty v-else description="这里空空如也~" />
      </el-collapse-item>
    </el-collapse>
    <!-- 货品信息 -->
    <el-collapse v-model="activeNames">
      <el-collapse-item title="货品信息" name="3">
        <el-table
          :data="tableData"
          :stripe="true"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
          />
          <el-table-column
            prop="goodsName"
            label="货品名称"
          />
          <el-table-column
            prop="goodsType"
            label="货品类型"
          />
          <el-table-column
            prop="totalWeight"
            label="重量(千克)"
          />
          <el-table-column
            prop="totalVolume"
            label="体积(立方)"
          />
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { getWayBillDetailApi } from '@/api/business'
export default {

  components: {},
  data() {
    return {
      activeNames: ['1', '2', '3'], // 设置面板默认展开状态为true
      tableData: [],
      dataInfo: {}
    }
  },

  computed: {},

  created() {
    this.getWayBillDetail()
  },

  methods: {
    async getWayBillDetail() {
      this.dataInfo = await getWayBillDetailApi(this.$route.params.id)
      // console.log(this.$route.params.id)
      console.log(this.dataInfo)
      const goodsData = {
        goodsName: this.dataInfo.order.orderCargoDTOS[0].name,
        goodsType: this.dataInfo.order.orderCargoDTOS[0].goodsType.name,
        totalWeight: this.dataInfo.order.orderCargoDTOS[0].totalWeight,
        totalVolume: this.dataInfo.order.orderCargoDTOS[0].totalVolume
      }
      this.tableData.push(goodsData)
    },
    // 设置面板默认展开状态
    handleChange(activeNames) {
      // 折叠项变化时触发的事件处理程序
      console.log('当前展开的折叠项: ', activeNames)
    }
  }
}

</script>
<style  scoped lang="scss">
.detail-container {
    padding: 20px;
    background-color: #f3f4f7;
    padding-top: 23px;
    ::v-deep .el-card__body {
    padding: 25px 44px;
    padding-right: 0;
    font-size: 14px;
    span{
      color: #818693;
    }
    .ddbh{
      span{
        margin-left: 27px;
      }
    }
    .yqddsj{
      margin-top: 25px;
    }
  }
    ::v-deep .el-collapse {
    border: none;
    margin-top: 20px;
    border-radius: 4px;
    .el-collapse-item__header {
      display: flex;
      align-items: center;
      height: 60px;
      line-height: 60px;
      background: #f8faff!important;
      border-radius: 4px 4px 0 0;
      border-bottom: 0;
      font-size: 16px;
      font-weight: 700;
      padding: 0 44px;
    }
    .el-collapse-item__content {
      padding: 24px 44px;
    }
    .pake1{
      margin-top: 15px;
      img{
        width: 14px;
        height: 18px;
        vertical-align: middle;
        margin-left: 2px;
        margin-right: 10px;
      }
      .img-info2{
        width: 17px;
        height: 17px;
        vertical-align: middle;
        margin-bottom: 4px;
      }
      span{
        font-size: 16px;
        line-height: 28px;
      }
    }
    .Shipper{
      margin-top: 0;
      margin-left: 40px;
      display: flex;
      justify-content: flex-start;
      .suffixphone{
        margin-left: 174px;
      }
    }
    .pake-info-remarks{
      margin-top: 20px;
      margin-left: 31px;
      span{
         font-size: 16px;
      }
    }
    .demo-input-suffix {
      font-size: 14px;
      font-weight: 400;
      margin-top: 10px;
      span{
        color: #818693;
      }
    }
  }
//   ::v-deep .el-collapse.transport .el-collapse-item__content {
//     // padding-bottom: 0 !important;
// }
// 运输信息
::v-deep  .el-steps {
    position: relative;
    right: 80px;
}
::v-deep .el-step .el-step__head.is-success {
    color: #419eff;
    border-color: #419eff;
    .el-step__line {
      top: 20px;
      border-bottom: 1px solid #419eff;
      height: 0;
      // background: transparent;
    }
  .el-step__icon.is-text {
    border: 1px solid;
    }
    .el-step__icon-inner {
    font-weight: 400;
    color: #419eff;
    }
    .el-step__icon {
      width: 40px;
      height: 40px;
      font-size: 20px;
    }
  }
   ::v-deep .el-step.is-center .el-step__main {
    margin-top: 30px;
    text-align: center;
    .el-step__title.is-success {
    font-size: 14px;
    font-weight: 400;
    color: #20232a;
    }
   .el-step__description {
      padding-left: 100%;
      padding-right: 10%;
      .step-row {
        min-width: 250px;
        margin-top: 10px;
        position: relative;
        &:before {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 16px 50px 16px;
    border-color: transparent transparent #f4f8fc transparent;
    top: -90px;
    left: 43%;
}
        .processing_content{
          background: #f4f8fc;
          border-radius: 8px;
          padding: 14px 15px;
          font-size: 14px;
          color: #20232a;
          // font-weight: 400;
        }
        tr {
          display: block;
         margin-top: 9px;
       }
      }
    }
  }
  ::v-deep .el-step__description{
    display: flex;
    justify-content: center;
  }
}
</style>
